<template>
    <div class="common-size adminOffice_deviceValuecontainer">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="adminOffice_deviceValuechart">
            <div class="adminOffice_deviceValuechart_box">
                <table class="left pie-chart-desc">
                    <tbody>
                        <tr v-for="(obj,index) in newChartData" v-bind:class=" (index%2 == 0)?'odd':''  " >
                            <td>{{obj.name}}</td>
                            <td>
                                <div class="bars clear">
                                    <div v-for="(item,key) in obj.style" class="item left" :style="[{width: item.len + 'px'},{left: item.left + 'px'}]"></div>
                                </div>
                            </td>
                            <td>
                                <div class="tips clear">
                                    <div v-for="(item,k) in obj.val" class="item left"><i v-bind:class="'i-'+(k+1) "></i>{{item}}</div>
                                </div>
                            </td>
                            <td>{{obj.total}}万元</td>
                        </tr>

                    </tbody>
                </table>
                <div class="notice-tips">
                    <div class="tips clear">
                        <div class="item left"><i class="i-1"></i>一万以下</div>
                        <div class="item left"><i class="i-2"></i>万元级</div>
                        <div class="item left"><i class="i-3"></i>十万级</div>
                        <div class="item left"><i class="i-4"></i>百万级</div>
                        <div class="item left"><i class="i-5"></i>千万级</div>
                    </div>
                </div>

                <div class="y-name">单位：台</div>

                <h3 class="charts_title">设备价值TOP5科室</h3>
            </div>
        </div>
        <div class="sending-book-text">
            <div v-html="item" v-for="(item, index) in textData"></div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>

</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  export default {
    name: 'adminOffice_deviceValue',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        pageTitle: '科室多维分析',
        detailTitle: '价值分析'
      }
    },
    computed:{
      oneRemarkData () {
        return this.chartData.remark
      },
      newChartData () {
        return this.deviceValueChart()
      },

      textData () {
        return this.chartData.textData
      },

    },
    created() {
    },
    mounted() {

    },
    methods: {
      deviceValueChart () {
        const scale = 1;
        const totalLen = 196;
        if(!this.chartData.maxCount || !this.chartData.chartData) return
        const maxCount = this.chartData.maxCount
        this.chartData.chartData.forEach((obj,index) =>{
            obj.style = [];
            obj.len = [];
            let totalVal = obj.total;
            obj.val.forEach((item,key) =>{
                let l = parseInt((item*totalLen)/maxCount);
                let left = 0;
                if(key === 1) left = obj.len[0] - 5;
                if(key === 2) left = obj.len[0] + obj.len[1] - 5;
                if(key === 3) left = obj.len[0] + obj.len[1] + obj.len[2] - 5;
                if(key === 4) left = obj.len[0] + obj.len[1] + obj.len[2] + obj.len[3] - 5;
                obj.len.push(l);
                obj.style.push( {
                    len: l + (key===0?0:5),
                    left: left
                });
            })
        })
        return this.chartData.chartData
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .adminOffice_deviceValuecontainer {
        .adminOffice_deviceValuechart {
            margin-top: 10px;
            padding: 0 35px;
            .adminOffice_deviceValuechart_box {
                height:560px;
                overflow: hidden;
                position: relative;
                background: #FFF;
                margin: 0 0 50px 0;
                .chart-box {
                    width: 100%;
                    height: 400px;
                }
                .y-name {
                    position: absolute;
                    top: 35px;
                    right: 4%;
                    font-size: 12px;
                    color: #989898;
                }
                .notice-tips{
                    color: #666;
                    position: absolute;
                    font-weight: normal;
                    width: 475px;
                    left: 50%;
                    margin-left: -238px;
                    text-align: center;
                    bottom: 80px;
                    .tips{
                        background: none;
                        width: 600px;
                        margin: 0 auto;
                        .item{
                            width: 100px;
                            text-align: left;
                        }
                    }
                }
                >h3{
                    color: #666;
                    position: absolute;
                    font-weight: normal;
                    width: 100%;
                    text-align: center;
                    bottom: 20px;
                }

                >table{
                    width: 682px;
                    margin: 70px 0 0 0;
                    border-collapse:collapse;
                    font-size: 12px;
                    >tbody>tr{
                        height: 50px;
                        &.odd{
                            >td{
                                &:nth-child(2),&:nth-child(3),&:nth-child(4) {
                                    background: #fafbfb;

                                }
                            }

                        }
                        &:nth-child(5){
                            >td{
                                &:nth-child(2),&:nth-child(3),&:nth-child(4) {
                                    border-bottom:2px solid #efefef;
                                }
                            }
                        }
                        >td{
                            height: 70px;
                            &:nth-child(1){
                                text-align: right;
                                color: #656666;
                                font-size: 12px;
                                padding-right: 10px;
                            }
                            &:nth-child(2){
                                border-top:2px solid #efefef;
                                border-left:2px solid #efefef;
                                .bars{
                                    width: 196px;
                                    height: 16px;
                                    background: #efefef;
                                    border-radius: 16px;
                                    position: relative;
                                    margin: 0 0 0 10px;
                                    .item{
                                        position: relative;
                                        width: 50px;
                                        height: 16px;
                                        border-radius : 16px;
                                        -webkit-border-radius : 16px;
                                        position: absolute;
                                        &:nth-child(1){
                                            z-index: 50;

                                            background : -webkit-linear-gradient(0deg, rgba(193, 182, 217, 1) 0.1%, rgba(125, 118, 181, 1) 99.9%);
                                            background : -webkit-gradient(linear,3.61% 50% ,95.69% 50% ,color-stop(0.001,rgba(193, 182, 217, 1) ),color-stop(0.999,rgba(125, 118, 181, 1) ));
                                            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#C1B6D9', endColorstr='#7D76B5' ,GradientType=0)";
                                            background : linear-gradient(90deg, rgba(193, 182, 217, 1) 0.1%, rgba(125, 118, 181, 1) 99.9%);
                                            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C1B6D9',endColorstr='#7D76B5' , GradientType=1);
                                        }
                                        &:nth-child(2){
                                            z-index: 40;
                                            left: 45px;
                                            width: 55px;
                                            background : -webkit-linear-gradient(0deg, rgba(157, 195, 231, 1) 0.1%, rgba(77, 137, 200, 1) 99.9%);
                                            background : -webkit-gradient(linear,3.61% 50% ,95.69% 50% ,color-stop(0.001,rgba(157, 195, 231, 1) ),color-stop(0.999,rgba(77, 137, 200, 1) ));
                                            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9DC3E7', endColorstr='#4D89C8' ,GradientType=0)";
                                            background : linear-gradient(90deg, rgba(157, 195, 231, 1) 0.1%, rgba(77, 137, 200, 1) 99.9%);
                                            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9DC3E7',endColorstr='#4D89C8' , GradientType=1);
                                        }
                                        &:nth-child(3){
                                            z-index: 30;
                                            left: 95px;
                                            width: 55px;
                                            background : -webkit-linear-gradient(0deg, rgba(167, 211, 157, 1) 0.1%, rgba(113, 189, 114, 1) 99.9%);
                                            background : -webkit-gradient(linear,3.61% 50% ,95.69% 50% ,color-stop(0.001,rgba(167, 211, 157, 1) ),color-stop(0.999,rgba(113, 189, 114, 1) ));
                                            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A7D39D', endColorstr='#71BD72' ,GradientType=0)";
                                            background : linear-gradient(90deg, rgba(167, 211, 157, 1) 0.1%, rgba(113, 189, 114, 1) 99.9%);
                                            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A7D39D',endColorstr='#71BD72' , GradientType=1);
                                        }
                                        &:nth-child(4){
                                            z-index: 20;
                                            left: 145px;
                                            width: 55px;
                                            background : -webkit-linear-gradient(0deg, rgba(248, 231, 158, 1) 0.1%, rgba(229, 182, 79, 1) 99.8%);
                                            background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0.001,rgba(248, 231, 158, 1) ),color-stop(0.998,rgba(229, 182, 79, 1) ));
                                            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8E79E', endColorstr='#E5B64F' ,GradientType=0)";
                                            background : linear-gradient(90deg, rgba(248, 231, 158, 1) 0.1%, rgba(229, 182, 79, 1) 99.8%);
                                            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8E79E',endColorstr='#E5B64F' , GradientType=1);
                                        }
                                        &:nth-child(5){
                                            z-index: 10;
                                            left: 195px;
                                            width: 55px;
                                            background : -webkit-linear-gradient(0deg, rgba(247, 225, 135, 1) 0.1%, rgba(239, 139, 101, 1) 99.8%);
                                            background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0.001,rgba(247, 225, 135, 1) ),color-stop(0.998,rgba(239, 139, 101, 1) ));
                                            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7E187', endColorstr='#EF8B65' ,GradientType=0)";
                                            background : linear-gradient(90deg, rgba(247, 225, 135, 1) 0.1%, rgba(239, 139, 101, 1) 99.8%);
                                            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7E187',endColorstr='#EF8B65' , GradientType=1);
                                        }
                                    }
                                }

                            }
                            &:nth-child(3){

                                border-top:2px solid #efefef;

                            }
                            &:nth-child(4){
                                color: #333;

                                font-size: 12px;
                                border-right:2px solid #efefef;
                                border-top:2px solid #efefef;
                            }

                        }
                    }
                }

            }

            .tips{
                width: 297px;
                height: 40px;
                background: url("../assets/images/tips_bg.png") no-repeat;
                background-size: 100% 100%;
                line-height: 40px;
                .item{
                    width: 55px;
                    &:nth-child(1){
                        margin: 0 0 0 17px;
                    }
                    >i{
                        width: 10px;
                        height: 10px;
                        border-radius: 10px;
                        display: inline-block;
                        margin: 0 3px 0 0;
                        &.i-1{
                            background: linear-gradient(to right, #C1B6D9, #7D76B5);
                        }
                        &.i-2{
                            background: linear-gradient(to right, #9DC3E7, #4D89C8);
                        }
                        &.i-3{
                            background: linear-gradient(to right, #A7D39D, #71BD72);
                        }
                        &.i-4{
                            background: linear-gradient(to right, #F8E79E, #E5B64F);
                        }
                        &.i-5{
                            background: linear-gradient(to right, #F7E187, #EF8B65);
                        }
                    }
                    color: #333;
                    font-size: 12px;
                }
            }
        }
        >h4{
            color: #666;
            text-align: center;
            width: 100%;
            padding: 20px 0 25px ;
            >b{
               color: #000;
            }
        }
        .detail-title{
            color: #0a122d;
            font-weight: 700;
            padding: 0 35px;
        }
    }
</style>
